<!DOCTYPE html> 
<html> 
  <head> 
    <title>jquery.multi-select.js - Documentation</title>
    <meta name="description" content="Documentation page for jquery.multi-select.js jquery plugin">
    <link href="css/multi-select.css" rel="stylesheet" type="text/css">
    <link href="css/application.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23068623-1']);
      _gaq.push(['_setDomainName', '.loudev.com']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
  </head> 
  <body>
    <div id='page'>
      <a href='https://github.com/lou/multi-select/zipball/master' class='download button green'><img src='img/download.png' width='16' height='16'/>Download</a>
      <h1>jquery.multi-select.js</h1>
      <ul id='menu'>
        <li><a href='index.html'>Home</a></li>
        <li>&middot;</li>
        <li><a href='demos.html'>Demos</a></li>
        <li>&middot;</li>
        <li class='active'><a href='documentation.html'>Documentation</a></li>
        <li id='fork-me'>Fork me on <a href='https://github.com/lou/multi-select'>Github</a></li>
      </ul>
      <div>
        <h2>Options</h2>
        <table>
          <tr>
            <th width='20%'>option</th>
            <th width='20%'>default</th>
            <th width='60%'>description</th>
          </tr>
          <tr>
            <td>afterSelect</td>
            <td>function() {}</td>
            <td>Function to call after one option is selected.</td>
          </tr>
          <tr>
            <td>afterDeselect</td>
            <td>function() {}</td>
            <td>Function to call after one option is deselected.</td>
          </tr>
          <tr>
            <td>selectableHeader</td>
            <td>null</td>
            <td>Text or HTML to display on the selectable container.</td>
          </tr>
          <tr>
            <td>selectedHeader</td>
            <td>null</td>
            <td>Text or HTML to display on the selected container.</td>
          </tr>
          <tr>
            <td>disabledClass</td>
            <td>'disabled'</td>
            <td>CSS class for disabled items.</td>
          </tr>
          <tr>
            <td>emptyArray</td>
            <td>false</td>
            <td>Will return an empty array instead of null when nothing is selected.<br /><strong>Warning:</strong> It is not the standard multiselect behavior, if set to true your code will not remains unobstrusive.</td>
          </tr>
        </table>
        <h2>Methods</h2>
        <p>
          You must init the multiple select with $('#my-select').multiSelect() before calling one of the following methods.
        </p>
        <br/>
        <table>
          <tr>
            <th>method</th>
            <th>params</th>
            <th>example</th>
          </tr>
          <tr>
            <td>select</td>
            <td>value (String)</td>
            <td>$('#my-select').multiSelect('select', 'fr');</td>
          </tr>
          <tr>
            <td>deselect</td>
            <td>value (String)</td>
            <td>$('#my-select').multiSelect('deselect', 'fr');</td>
          </tr>
          <tr>
            <td>select_all</td>
            <td>visible (optional Boolean)</td>
            <td>$('#my-select').multiSelect('select_all', true);<br />If visible set to true, it will select only visible items on te selectable list. Otherwise it will also select hidden items.</td>
          </tr>
          <tr>
            <td>deselect_all</td>
            <td>-</td>
            <td>$('#my-select').multiSelect('deselect_all');</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>